<template>
<div>
  <button @click="orderBy='price'" :class="{'orderType':orderBy=='price'}">价格</button>
  <button @click="orderBy='comments'" :class="{'orderType':orderBy=='comments'}">评论数</button>
  --
  <button @click="orderType='asc'" :class="{'orderType':orderType=='asc'}">升序</button>
  <button @click="orderType='des'" :class="{'orderType':orderType=='des'}">降序</button>
  <template v-for="lesson in lessonLists" :key="lesson.id">
    <div>
      {{lesson.title}}-{{lesson.price}}-{{lesson.comments}}
    </div>
  </template>
</div>
</template>

<script>
import lessons from '../../data/lessons'
export default {
  data() {
    return {
      lessons,
      orderBy: 'price',
      orderType:'asc'
    }
  },
  computed:{
    lessonLists(){
        return this.lessons.sort((a,b)=>{
        return this.orderType=='asc' ? a[this.orderBy] - b[this.orderBy]:
        b[this.orderBy] - a[this.orderBy];
        })
    }
  },
  /*函数的性能更差，当内容重新计算的时候函数会重新计算*/
  methods: {
    lessonOrder(){

    }
  }
}
</script>

<style>
.orderType{
  background-color: red;
}
</style>